<%--
  Created by IntelliJ IDEA.
  User: DELL
  Date: 2021/12/9
  Time: 15:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>EShopManager</title>
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">




    <!-- TreeTable -->

    <link href="${pageContext.request.contextPath}/static/lib/treetable/jquery.treetable.css" rel="stylesheet" type="text/css" />
    <link href="${pageContext.request.contextPath}/static/lib/treetable/jquery.treetable.theme.default.css" rel="stylesheet" />
<%--    <script src="${pageContext.request.contextPath}/static/lib/treetable/jquery.treetable.js" type="text/javascript"></script>--%>
    <script type="${pageContext.request.contextPath}/text/javascript">
        $(function() {
            $("#example-basic-expandable").treetable({
                expandable : true
            });
        });
    </script>
    <!--------------->


    <!-- Demo page code -->
    <style type="text/css">
        #line-chart {
            height: 300px;
            width: 800px;
            margin: 0px auto;
            margin-top: 1em;
        }

        .brand {
            font-family: georgia, serif;
        }

        .brand .first {
            color: #ccc;
            font-style: italic;
        }

        .brand .second {
            color: #fff;
            font-weight: bold;
        }
    </style>

</head>
<body>

<c:import url="top.jsp"></c:import>
<c:import url="left.jsp"></c:import>


<div class="content">
    <div class="header">
        <h1 class="page-title">分类管理</h1>
    </div>

    <ul class="breadcrumb">
        <li><a href="typemanager.jsp">分类管理</a> <span class="divider">/</span></li>
        <li class="active">分类列表管理</li>
    </ul>

    <div class="container-fluid">

        <div class="row-fluid">

            <div class="block">
                <a href="#page-filter" class="block-heading" data-toggle="collapse">增加分类</a>
                <div id="page-filter" class="block-body collapse in">
                    <div class="search-well">
                        <form  class="form-inline" role="search"
                               action="#" method="post">
<%--                            <select class="form-control" id="selType">--%>
<%--                                <option value="" selected="selected">--请选择--</option>--%>
<%--                                <option value="0">一级分类</option>--%>
<%--                                <option value="1">二级分类</option>--%>
<%--                            </select>--%>

                            <input type="text" class="form-control" placeholder="请输入分类名称"
                                   name="parent_type_name" />

<%--                            <select class="form-control" name="type_id">--%>
<%--                            </select>--%>
<%--                            <input type="text" class="form-control" placeholder="请输入二级分类名称"--%>
<%--                                   name="child_type_name" />--%>


                            <button type="button" class="btn btn-primary" @click="addtype" id="btnSave">
                                <i class="icon-save"></i> 保存
                            </button>

                        </form>
                    </div>
                </div>
            </div>
        </div>


        <div class="row-fluid">

            <table id="example-basic-expandable" class="table">
                <thead>
                <tr id="theTableTitle">
                    <th>分类名称</th>
                    <th>类型编号</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>

                <tr data-tt-id="1" v-for="(a,i) in getAllTypArray" :key="i">
<%--                    v-for="(item,index) in parentTypesData" :key="index" :value="item.type_id">{{item.type_name}}--%>
                    <td>{{a.type_name}}</td>
                    <td>{{a.type_id}}</td>
                    <td>
                        <a href="javascript:" title="删除" @click="delect(a.type_id)"><i class="icon-remove"></i></a>
                    </td>
                </tr>




                </tbody>

            </table>

        </div>


        <!DOCTYPE html>
        <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <title>Insert title here</title>
        </head>
        <body>

        <c:import url="footer.jsp"></c:import>
    </div>


</div>

<script src="${pageContext.request.contextPath}/static/lib/bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/lib/tooltips.js"></script>
<script src="${pageContext.request.contextPath}/static/lib/vue.js" type="text/javascript"></script>
<%--<script type="text/javascript">--%>
<%--    $("[rel=tooltip]").tooltip();--%>

<%--    //加载一级分类列表--%>
<%--    function loadParentTypeList(){--%>
<%--        var url="${pageContext.request.contextPath}/typemanage/getAllTyp.action";--%>
<%--        var data={--%>
<%--            type_id:0--%>
<%--        };--%>
<%--        $.post(url,data,function(response){--%>
<%--            var selectInnerHTML="<option value=''>--请选择一级分类--</option>";--%>
<%--            for (var i = 0; i < response.data.length; i++) {--%>
<%--                var typeInfo=response.data[i];--%>
<%--                selectInnerHTML+="<option value='"+typeInfo.type_id+"'>"+typeInfo.type_name+"</option>";--%>
<%--            }--%>
<%--            $("select[name='type_id']").html(selectInnerHTML);--%>

<%--        });--%>
<%--    }--%>

<%--    $(function() {--%>
<%--        $('.demo-cancel-click').click(function() {--%>
<%--            return false;--%>
<%--        });--%>

<%--        //初始化隐藏3个子输入框--%>
<%--        $("input[name='parent_type_name']").hide();--%>
<%--        $("select[name='type_id']").hide();--%>
<%--        $("input[name='child_type_name']").hide();--%>
<%--        //加载一级分类列表--%>
<%--        loadParentTypeList();--%>

<%--        //选择一级分类、二级分类--%>
<%--        $("#selType").change(function(){--%>
<%--            var value=$(this).val();--%>
<%--            if (value=='0') {//选择了一级分类--%>
<%--                $("input[name='parent_type_name']").show();--%>
<%--                $("select[name='type_id']").hide();--%>
<%--                $("input[name='child_type_name']").hide();--%>
<%--            }--%>
<%--            if (value=='1') {//选择了二级分类--%>
<%--                $("input[name='parent_type_name']").hide();--%>
<%--                $("select[name='type_id']").show();--%>
<%--                $("input[name='child_type_name']").show();--%>
<%--            }--%>
<%--            if (value=='') {//没有选择--%>
<%--                $("input[name='parent_type_name']").hide();--%>
<%--                $("select[name='type_id']").hide();--%>
<%--                $("input[name='child_type_name']").hide();--%>
<%--            }--%>
<%--        });--%>

<%--        //保存按钮点击--%>
<%--        $("#btnSave").click(function(){--%>

<%--            var selType=$("#selType").val();--%>
<%--            if(selType=='0'){//选择了一级分类--%>
<%--                var parent_type_name=$("input[name='parent_type_name']").val();--%>
<%--                if (parent_type_name=='') {--%>
<%--                    show_err_msg("请输入一级分类名称");--%>
<%--                }else{--%>
<%--                    show_loading();--%>
<%--                    var url="type/add.action";--%>
<%--                    var data={--%>
<%--                        type_name:parent_type_name--%>
<%--                    };--%>
<%--                    $.post(url,data,function(response){--%>
<%--                        var jsonData=$.parseJSON(response);--%>
<%--                        if (jsonData.status==200) {--%>
<%--                            show_msg('操作成功',"type/manager.action");--%>
<%--                        }--%>

<%--                    });--%>
<%--                }--%>

<%--            }else if(selType=='1'){//选择了二级分类--%>
<%--                var type_id=$("select[name='type_id']").val();--%>
<%--                var child_type_name=$("input[name='child_type_name']").val();--%>
<%--                if (type_id=='') {--%>
<%--                    show_err_msg("请选择一级分类");--%>
<%--                }else if (child_type_name=='') {--%>
<%--                    show_err_msg("请输入二级分类名称");--%>
<%--                }else{--%>
<%--                    show_loading();--%>
<%--                    var url="type/add.action";--%>
<%--                    var data={--%>
<%--                        type_name:child_type_name,--%>
<%--                        parent_id:type_id--%>
<%--                    };--%>
<%--                    $.post(url,data,function(response){--%>
<%--                        var jsonData=$.parseJSON(response);--%>
<%--                        if (jsonData.status==200) {--%>
<%--                            show_msg('操作成功',"type/manager.action");--%>
<%--                        }--%>

<%--                    });--%>
<%--                }--%>

<%--            }else{//未选择--%>
<%--                show_err_msg("请选择您要增加的类型");--%>
<%--            }--%>

<%--            //禁止表单提交--%>
<%--            return false;--%>

<%--        });--%>

<%--    });--%>
<%--</script>--%>
<script src="${pageContext.request.contextPath}/static/lib/jquery-1.7.2.min.js" type="text/javascript"></script>
<script>
        var a =new Vue({
            el:".content",
            data:{
                getAllTypArray:[],
                childListArray:[]
            },
            methods:{
                getAllTypMethods(){
                    $.post("${pageContext.request.contextPath }/type/selectType.do",function(response){
                        a.getAllTypArray = response.data
                        console.log(a.getAllTypArray)
                    })
                },
                //删除
                delect(event){
                    console.log(event)

                    $.post("${pageContext.request.contextPath }/type/deletetype.do",{"type_id":event},function(response){

                        alert("删除成功！！！")
                        //刷新页面
                        window.location.reload();

                    })

                },
                //添加
                addtype(){
                     var name= $(".form-control").val();

                    $.post("${pageContext.request.contextPath }/type/addtype.do",{"name":name},function(response){

                        alert("添加成功！！！")
                        //刷新页面
                        window.location.reload();
                    })


                }

            },
            created(){
                //页面加载调用此方法
                this.getAllTypMethods()
            }
        })
</script>
</body>
</html>
